<template>
	<view class="big-Box">
		<view class="left-box">
			<view class="item" :class="[item.id == leftActive?'item-active':'']" v-for="item in leftList" :key="item.id"
				@click="handleLeft(item)">
				<view class="relative">
					{{`${item.label}`}}
					<u-badge absolute :offset="[8,-12]" type="error" max="99" :value="item.num"></u-badge>
				</view>
			</view>
		</view>
		<view class="right-box">
			<view v-if="leftActive == 1">
				<view class="top-tags">仅展示当前待执行的巡查任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id"
					@click="handleToCheck(item,'inspectionNum')">
					<view class="double-title">
						<view class="title">
							{{item.planName}}
						</view>
						<view class="right-tags">未巡查 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="content">巡查时间：{{item.planDate}} {{item.periodUnit==='单次'?'':'-'+item.limitDate}}</view>
					<view class="bottom-content">
						<view class="tags" v-if="item.regionName">{{item.regionName}}</view>
						<view class="tags" v-if="item.periodUnit">{{item.periodUnit}}</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 2">
				<view class="top-tags">展示用户全部未整改/重新整改任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'dangerNum')">
					<view class="title">{{item.dangerSite}}</view>
					<view class="double-content">{{item.dangerDesc}}</view>
					<view class="bottom-content">
						<view class="tags">{{item.planName}}</view>
						<view class="hidden-tags"
							:class="[item.dangerStatus == 1?'orange-tags':item.dangerStatus == 2?'red-tags':'']">
							{{item.dangerStatus == 1?'未整改':item.dangerStatus == 2?'重新整改':item.dangerStatus}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 3">
				<view class="top-tags">仅展示当前待执行的风险巡查任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'riskNum')">
					<view class="double-title">
						<view class="title">{{item.pointName}}</view>
						<view class="title-right"
							:class="[item.riskLevel == 1?'title-finish':item.riskLevel == 2?'title-close':item.riskLevel == 3?'title-yellow':'title-dyz']">
							{{item.riskLevel == 1?'重大风险':item.riskLevel == 2?'较大风险':item.riskLevel == 3?'一般风险':'低风险'}}
						</view>
					</view>
					<view class="content maBot">管控时间：{{item.planDate}}-{{item.limitDate}}</view>
					<view class="content">管控负责人：{{item.directorNames}}</view>
					<view class="bottom-content bottom-content-new">
						<view class="tags">{{item.period}}</view>
						<view class="right-tags">
							{{item.inspectionStatus == 0?'开始巡查':item.inspectionStatus == 1?'继续巡查':''}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 4">
				<view class="top-tags">仅展示用户待维修、维修中的维修任务</view>
				<view class="main-box pdm" v-for="item in mineList" :key="item.id">
					<view class="double-title">
						<view class="logo">{{item.repairType == 1?'内':'外'}}</view>
						<view class="title" style="flex: 1;">{{item.repairOrderNum}}</view>
						<view class="title-right"
							:class="[item.repairStatus==1?'title-close-repair':item.repairStatus==2?'title-dyz-repair':item.repairStatus==3?'title-dyz-repair':'']">
							{{item.repairStatus==1?'待维修':item.repairStatus==2?'维修中':item.repairStatus==3?'待验证':''}}
						</view>
					</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">设备名：<text class="txt">{{item.deviceName}}</text></view>
					<view class="content maBot">设备编号：<text class="txt">{{item.deviceNum}}</text></view>
					<view class="double-content maBot">故障描述：<text class="txt">{{item.description}}</text></view>
					<view class="content maBot">报修时间：<text class="txt">{{item.createTime}}</text></view>
					<view class="is-pass" v-if="item.verifyReason != ''">
						<view class="ispass-title wwning">
							<image class="img" src="../../../static/images/index/warning.png" mode=""></image>不通过原因
						</view>
						<view class="reson">
							{{item.verifyReason}}
						</view>
					</view>
					<view class="bottom-btn">
						<view class="bg-btn" @click="toSelectDetail(item)">查看详情</view>
						<view v-if="item.outsourceShowFlag==1" class="bg-btn" @click="gotoOutsourcing(item)">
							委外维修
						</view>
						<view v-if="item.beginRepairShowFlag==1" class="bg-btn" @click="togoRepairpage(item,2)">开始维修
						</view>
						<view v-if="item.closeRepairShowFlag==1&&item.repairStatus==1" class="bg-btn"
							@click="closeRepair(item)">关闭维修
						</view>
						<!-- <view class="su-line"></view> -->
						<view v-if="item.repairStatus==2" class="bg-btn2" @click="togoRepairpage(item,1)">继续维修</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 5">
				<view class="top-tags">仅显示当天点检任务</view>
				<view class="main-box pdm" v-for="item in mineList" :key="item.id">
					<view class="double-title">
						<view class="title color666">{{item.taskOrderNum}}</view>
						<view class="title-right"
							:class="[item.checkStatus==0?'title-dyz-repair':item.checkStatus==1?'title-finish-repair':'']">
							{{item.checkStatus==0?'待点检':item.checkStatus==1?'点检中':''}}
						</view>
					</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">设备名：<text class="txt">{{item.deviceName}}</text></view>
					<view class="content maBot">设备编号：<text class="txt">{{item.deviceNum}}</text></view>
					<view class="double-content maBot">
						点检时间：<text class="txt">{{`${item.planBeginDate}至${item.planEndDate}`}}</text></view>
					<view class="content maBot">点检人：<text class="txt">{{item.checkUserName}}</text></view>
					<view class="bottom-btn">
						<view class="bg-btn2" @click="handleToCheck(item,'checkNum')">
							{{item.checkStatus==0?'开始点检':item.checkStatus==1?'继续点检':''}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 6">
				<view class="top-tags">仅显示当天及逾期未完成的维保任务</view>
				<view class="main-box pdm" v-for="item in mineList" :key="item.id">
					<view class="double-title">
						<view class="title color666">{{item.taskOrderNum}}</view>
						<view class="title-right"
							:class="[item.maintainStatus==0?'title-dyz-repair':item.maintainStatus==1?'title-finish-repair':'']">
							{{item.maintainStatus==0?'待维保':item.maintainStatus==1?'维保中':''}}
						</view>
					</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">设备名：<text class="txt">{{item.deviceName}}</text></view>
					<view class="content maBot">设备编号：<text class="txt">{{item.deviceNum}}</text></view>
					<view class="double-content" style="margin-bottom: 0;">
						维保时间：<text class="txt">{{`${item.planBeginDate}至${item.planEndDate}`}}</text></view>
					<view class="content maBot">维保人：<text class="txt">{{item.maintainUserName}}</text></view>
					<view class="bottom-btn">
						<view class="bg-btn2" @click="handleToCheck(item,'maintainNum')">
							{{item.maintainStatus==0?'开始维保':item.maintainStatus==1?'继续维保':''}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 7">
				<view class="top-tags">展示用户近三天及期限内的待培训任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'trainNum')">
					<view class="double-title">
						<view class="title">{{item.name}}</view>
						<view class="title-right"
							:class="[item.trainState==1?'title-close-repair':item.trainState==2?'title-dyz-repair':'']">
							{{item.trainState==1?'未开始':item.trainState==2?'已开始':''}}
						</view>
					</view>
					<view style="display: flex;margin-top: 8rpx;padding: 0 32rpx;">
						<view class="tags-info maxWidth">{{item.categoryName}}</view>
					</view>
					<view class="content maBot">培训方式：<text class="txt">{{item.trainWay == 1?'线上':'线下'}}</text></view>
					<view class="content maBot">考核方式：<text class="txt">{{renderWay(item.assessWay)}}</text></view>
					<view class="double-content" style="margin-bottom: 40rpx;">
						时间：<text class="txt">{{`${item.trainStartTime}至${item.trainEndTime}`}}</text></view>
				</view>
			</view>
			<view v-if="leftActive == 8">
				<view class="top-tags">展示用户近三天及期限内的待考试任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'examNum')">
					<view class="image-box">
						<image class="title-image" :src="item.picture">
						</image>
					</view>
					<view class="double-title" style="margin-top: 8rpx;">
						<view class="title">{{item.name}}</view>
						<view class="title-right"
							:class="[item.examFlag==1?'title-dyz-repair':item.examFlag==2?'.title-finish':'.title-finish-repair']">
							{{item.examFlag==1?'待考试':item.examFlag==2?'缺考':'已考试'}}
						</view>
					</view>
					<view class="double-content" style="margin-bottom: 0;">
						时间：<text class="txt">{{`${item.trainStartTime}至${item.trainEndTime}`}}</text></view>
					<view class="content maBot" style="margin-bottom: 24rpx;">关联培训：<text
							class="txt">{{item.trainName}}</text></view>
				</view>
			</view>
			<view v-if="leftActive == 9">
				<view class="top-tags">展示用户近三天及期限内的学习任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id"
					@click="handleToCheck(item,'learnCourseNum')">
					<view class="title">{{item.name}}</view>
					<view style="display: flex;margin-top: 8rpx;padding: 0 32rpx;">
						<view class="tags-info maxWidth">{{item.courseTypeName}}</view>
					</view>
					<view class="content maBot">关联培训：<text class="txt">{{item.trainName}}</text></view>
					<view class="double-content" style="margin-bottom: 0;">
						时间：<text class="txt">{{`${item.trainStartTime}至${item.trainEndTime}`}}</text></view>
				</view>
			</view>
			<view v-if="leftActive == 10">
				<view class="top-tags">展示用户近三天及期限内的待演练任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'drillNum')">
					<view class="double-title">
						<view class="title">{{item.name}}</view>
						<view class="title-right"
							:class="[item.drillStatus==1?'title-close-repair':item.drillStatus==2?'title-dyz-repair':'']">
							{{item.drillStatus==1?'未开始':item.drillStatus==2?'已开始':''}}
						</view>
					</view>
					<view style="display: flex;margin-top: 8rpx;padding: 0 32rpx;">
						<view class="tags-info maxWidth">{{item.itemCategory}}</view>
					</view>
					<view class="content maBot">总指挥：<text class="txt">{{item.chiefName}}</text></view>
					<view class="content maBot">记录人：<text class="txt">{{item.recorderName}}</text></view>
					<view class="double-content" style="margin-bottom: 40rpx;">
						时间：<text class="txt">{{`${item.drillStartTime}至${item.drillEndTime}`}}</text></view>
				</view>
			</view>
			<u-loadmore v-if="total>8" :status="status" :line="true" />
			<view class="empty-data" v-if="mineList.length == 0">
				<u-empty mode="data" :marginTop="50"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				leftActive: 1,
				typeActive: 'inspectionNum',
				leftList: [{
						id: '1',
						label: '巡查任务',
						type: 'inspectionNum',
						num: 0
					}, {
						id: '2',
						label: '隐患整改',
						type: 'dangerNum',
						num: 0
					},
					{
						id: '3',
						label: '风险点巡查',
						type: 'riskNum',
						num: 0
					},
					{
						id: '4',
						label: '维修任务',
						type: 'repairNum',
						num: 0
					}, {
						id: '5',
						label: '点检任务',
						type: 'checkNum',
						num: 0
					}, {
						id: '6',
						label: '维保任务',
						type: 'maintainNum',
						num: 0
					}, {
						id: '7',
						label: '培训任务',
						type: 'trainNum',
						num: 0
					}, {
						id: '8',
						label: '考试任务',
						type: 'examNum',
						num: 0
					}, {
						id: '9',
						label: '学习任务',
						type: 'learnCourseNum',
						num: 0
					}, {
						id: '10',
						label: '演练任务',
						type: 'drillNum',
						num: 0
					}
				],
				mineList: [],
				params: {
					pn: 1,
					ps: 8,
				},
				pages: 1,
				total: 0,
			}
		},
		onShow() {
			this.mineList = []
			this.params.pn = 1
			this.getNum()
			this.getList()
		},
		methods: {
			getNum() {
				uni.$u.http.get(`/device/mobile/deviceRepair/getNotFinishNum`).then(res => {
					if (res.code == 0) {
						this.leftList.map(item => {
							item.num = res.data[item.type]
						})
					}
				}).catch(err => {})
			},
			getList() {
				let url = ''
				let params = JSON.parse(JSON.stringify(this.params))
				switch (this.typeActive) {
					case 'inspectionNum':
						url = '/check/mobile/appInspectionRecord/getNotInspectionList'
						break;
					case 'dangerNum':
						url = '/check/mobile/appDangerInfo/getNotDealDangerList'
						params.type = 1
						break;
					case 'riskNum':
						url = '/check/mobile/riskInspectionTask/getNotInspectionTaskList'
						break;
					case 'repairNum':
						url = '/device/mobile/deviceRepair/getNotDealRepairList'
						params.type = 2
						break;
					case 'checkNum':
						url = '/device/mobile/deviceCheckTask/getNotDealCheckTaskList'
						break;
					case 'maintainNum':
						url = '/device/mobile/deviceMaintainTask/getNotDealMaintainTaskList'
						break;
					case 'trainNum':
						url = '/train/mobile/train/getNotDealTrainList'
						break;
					case 'examNum':
						url = '/train/mobile/exam/getNotDealExamList'
						break;
					case 'learnCourseNum':
						url = '/train/mobile/study/getNotLearnCourseList'
						break;
					case 'drillNum':
						url = '/check/mobile/drillInfo/getNotDealDrillList'
						break;
				}
				if (!url) return
				uni.$u.http.post(url, params).then(res => {
					if (res.code == 0) {
						this.mineList = this.mineList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			handleLeft(item) {
				if (item.type === this.typeActive) return
				this.leftActive = item.id
				this.mineList = []
				this.params.pn = 1
				this.typeActive = item.type
				this.getList()
			},
			handleToCheck(item, type) {
				if (type === 'inspectionNum') {
					// 巡查任务
					// 未巡查
					uni.navigateTo({
						url: `/pages/subPackagesA/troble/notTroble?inspectionId=${item.id}&planName=${item.planName}&isInspec=${0}`
					})
				} else if (type === 'dangerNum') {
					// 隐患管理
					uni.navigateTo({
						url: `/pages/subPackagesA/troble/notRectified?dangerStatus=${item.dangerStatus}&id=${item.id}`
					})
				} else if (type === 'riskNum') {
					// 风险点巡查
					uni.navigateTo({
						url: `/pages/subPackagesA/riskInspection/riskPatrol?taskId=${item.id}&pointName=${item.pointName}&unitName=${item.unitName}&isInspec=${0}`
					})
				} else if (type === 'checkNum') {
					// 点检任务
					if (item.checkStatus == 0) {
						uni.$u.http.post(`/device/mobile/deviceCheckTask/startCheckTask/${item.id}`).then(res => {
							if (res.code == 0) {}
						}).catch(err => {})
					}
					uni.navigateTo({
						url: '/pages/subPackagesB/checkupTask/checkinfo?id=' + item.id + '&taskOrderNum=' + item
							.taskOrderNum
					})
				} else if (type === 'maintainNum') {
					// 维保任务
					if (item.maintainStatus == 0 && item.maintainStatus !== '') {
						uni.$u.http.post(`/device/mobile/deviceMaintainTask/startMaintainTask/${item.id}`).then(res => {
							if (res.code == 0) {}
						}).catch(err => {})
					}
					uni.navigateTo({
						url: '/pages/subPackagesB/weibaoTask/weibaoinfo?id=' + item.id + '&taskOrderNum=' + item
							.taskOrderNum
					})
				} else if (type === 'trainNum') {
					uni.navigateTo({
						url: `/pages/subPackagesC/mineTrain/trainInfo?id=${item.id}&trainState=${item.trainState}`
					})
				} else if (type === 'examNum') {
					uni.navigateTo({
						url: `/pages/subPackagesC/exam/examwait?examPaperId=${item.id}&trainId=${item.trainId}`
					})
				} else if (type === 'learnCourseNum') {
					if (item.canStudyFlag == 0) {
						uni.$u.toast("学习暂未开启")
						return
					}

					uni.navigateTo({
						url: `/pages/subPackagesC/learning/learninfo?id=${item.id}&trainId=${item.trainId}&type=${0}&current=${0}`
					})
				} else if (type === 'drillNum') {
					uni.navigateTo({
						url: `/pages/subPackagesA/emergencyDrill/emergencyInfo?id=${item.id}&drillStatus=${item.drillStatus}`
					})
				}
			},
			toSelectDetail(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/repairList/wxDetail?orderNum=${item.repairOrderNum}&repairId=${item.id}`
				})
			},
			gotoOutsourcing(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/weiwaiRepair/repairlist?deviceId=' + item.deviceId + '&orderNum=' +
						item.repairOrderNum + '&repairId=' + item.id
				})
			},
			togoRepairpage(item, type) {
				// type 2-开始维修 1-继续维修
				if (type == 2) {
					uni.$u.http.post(`/device/mobile/deviceRepair/beginRepair/${item.id}`).then(res => {
						if (res.code == 0) {}
					}).catch(err => {})
				}
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/repairinfo?deviceId=' + item.deviceId + '&orderNum=' +
						item.repairOrderNum + '&repairId=' + item.id + '&deviceType=' + item.deviceType
				})
			},
			closeRepair(item) {
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/closerepair?repairId=' + item.id
				})
			},
			renderWay(data) {
				const typeForm = [{
					value: 1,
					label: '笔试'
				}, {
					value: 2,
					label: '实操'
				}]
				const newArr = []
				data.split(',').map(item => {

					if (typeForm.filter(it => it.value == item).length) {
						newArr.push(typeForm.filter(it => it.value == item)[0].label)
					}
				})
				return newArr.join(',')
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.color666 {
		font-size: 28rpx;
		color: #666666 !important;
	}

	.pdm {
		padding-bottom: 24rpx !important;
	}

	.big-Box {
		height: 100%;
		display: flex;

		.left-box {
			position: fixed;
			left: 0;
			height: 100vh;
			min-width: 108px;
			// border-right: 1px solid #F2F2F2;
			background: #F5F5F5;

			.item {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				border-left: 8rpx solid #fff;
				color: #666666;

				.relative {
					padding-left: 24rpx;
					position: relative;
					display: inline-block;
				}
			}

			.item-active {
				position: relative;
				border-left: 8rpx solid #0F53AC;
				color: #2B2B2B;
				background: #ffffff;
			}
		}

		.right-box {
			flex: 1;
			width: calc(100% - 108px);
			margin-left: 108px;

			.maxWidth {
				max-width: 46%;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}

			.tags {
				max-width: 216rpx;
				padding: 8rpx 24rpx;
				height: 52rpx;
				border-radius: 8rpx;
				border: 1px solid #0F53AC;
				color: #0F53AC;
				font-size: 24rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
				box-sizing: border-box;
			}

			.tags-info {
				// display: flex;
				// justify-content: flex-start;
				// align-items: center;
				padding: 8rpx 24rpx 8rpx 24rpx;
				border-radius: 8rpx;
				color: #666666;
				background: rgba(229, 229, 229, 1);
				font-size: 24rpx;
				margin-right: 20rpx;
			}

			.top-tags {
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
				padding: 30rpx 0;
				color: #8c8c8c;
				background-color: #ffffff;
			}

			.main-box {
				// padding: 40rpx 24rpx;
				border-bottom: 1px solid #EDEDED;

				.double-title {
					padding: 40rpx 32rpx 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// border-bottom: 2rpx solid #EDEDED;
					// padding-bottom: 14rpx;

					.title {
						margin: 0;
						padding: 0;
						font-size: 34rpx;
						color: #2B2B2B;
						width: 280rpx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}

					.right-tags {
						display: flex;
						align-items: center;
						color: #666666;
					}
				}

				.logo {
					font-size: 24rpx;
					border-radius: 4px;
					border: 1px solid rgba(15, 83, 172, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 4rpx 10rpx;
					line-height: 18px;
					margin-right: 8rpx;
					color: #0F53AC;
				}

				.title {
					margin-top: 40rpx;
					padding: 0 32rpx;
					color: #2B2B2B;
					font-size: 34rpx;
					font-weight: 500;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.content {
					color: #8C8C8C;
					font-size: 28rpx;
					padding: 0 32rpx;
					margin: 20rpx 0 20rpx 0;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.double-content {
					color: #8C8C8C;
					font-size: 28rpx;
					margin: 16rpx 0 36rpx;
					padding: 0 32rpx;
					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					-webkit-box-orient: vertical; //上下垂直
					-webkit-line-clamp: 2; //自定义行数
					word-break: break-all;
					word-wrap: break-word;
				}

				.maBot {
					margin-bottom: 0px;
				}

				.bottom-btn {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 24rpx;
					padding-top: 24rpx;
					border-top: 1px solid #f2f2f2;

					.bg-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 34rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}

					.bg-btn2 {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 34rpx;
						font-weight: 400;
						color: #0F53AC;
					}
				}

				.image-box {
					width: 100%;
					margin-top: 24rpx;
					padding: 0 32rpx;
					box-sizing: border-box;

					.title-image {
						display: block;
						width: 100%;
						height: 200rpx;
						border-radius: 4px;
					}
				}
			}

			.bottom-content {
				padding: 0 32rpx;
				margin-bottom: 40rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				color: #666666;
				font-size: 28rpx;

				.right-tags {
					display: flex;
					align-items: center;
				}

				// 隐患 重新整改 未整改
				.hidden-tags {
					height: 52rpx;
					line-height: 52rpx;
					display: flex;
					justify-content: flex-start;
					font-size: 24rpx;
					align-items: center;
					padding: 0 24rpx;
					border-radius: 8rpx;

				}

				.red-tags {
					background-color: rgba(255, 77, 77, 0.2);
					color: #FA4016;
				}

				.orange-tags {
					background-color: rgba(252, 119, 10, 0.2);
					color: #FC770A;
				}
			}

			.bottom-content-new {
				justify-content: space-between;
			}

			.title-right {
				min-width: 100rpx;
				// height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				padding: 8rpx 24rpx;
				box-sizing: border-box;
			}

			.title-ongoing {
				color: #858585;
				background-color: #DBDBDB;
			}

			.title-dyz {
				color: #fff;
				background-color: #04AFF1;
			}

			.title-yellow {
				color: #2B2B2B;
				background-color: #F9FF03;
			}

			.title-close {
				color: #2B2B2B;
				background-color: #FAC10D;
			}

			.title-finish {
				color: #fff;
				background-color: #FA0101;
			}

			.title-dyz-repair {
				color: #0F53AC;
				background-color: rgba(15, 83, 172, 0.2);
			}

			.title-close-repair {
				color: #fc770a;
				background-color: rgba(255, 120, 10, 0.3);
			}

			.title-finish-repair {
				color: #02AD82;
				background-color: rgba(2, 173, 130, 0.2);
			}

		}
	}

	.txt {
		color: #4D4D4D;
	}

	.is-pass {
		padding: 0 32rpx;

		.ispass-title {
			display: flex;
			align-items: center;
			font-size: 15px;
			font-weight: 400;
			color: #8c8c8c;
			padding: 24rpx 0 16rpx 0;
			line-height: 16px;

			.img {
				width: 16px;
				height: 16px;
				margin-right: 6rpx;
			}
		}

		.reson {
			font-size: 14px;
			font-weight: 400;
			color: #4D4D4D;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
</style>
